<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gateway</title>
    <style type="text/css">
        .full-screen {
            background-color: rgb(30, 34, 45);
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            color: white;
            text-align: center;
        }

        .container {
            padding-top: 10em;
            width: 50%;
            display: block;
            margin: 0 auto;
        }

        .error-num {
            font-size: 8em;
        }

        .eye {
            background: #fff;
            border-radius: 50%;
            display: inline-block;
            height: 100px;
            position: relative;
            width: 100px;
        }

        .eye::after {
            background: #000;
            border-radius: 50%;
            bottom: 56.1px;
            content: ' ';
            height: 33px;
            position: absolute;
            right: 33px;
            width: 33px;
        }

        .italic {
            font-style: italic;
        }

        p {
            margin-bottom: 4em;
        }

        a {
            color: white;
            text-decoration: none;
            text-transform: uppercase;
        }

        a:hover {
            color: lightgray;
        }
    </style>
</head>
<body>
<div class="full-screen" id="full-screen">
    <div class='container'>
        <span class="error-num">5</span>
        <div class='eye'></div>
        <div class='eye'></div>
        <p class="sub-text">Oh eyeballs! Something went wrong. We're <span class="italic">looking</span> to see what happened.</p>
        <a href="/">Go back</a>
    </div>
</div>
<script type="text/javascript">
    document.getElementById('full-screen').addEventListener('mousemove', (event) => {
        const eyes = document.getElementsByClassName('eye');
        for (const eye of eyes) {
            const x = eye.offsetLeft + eye.offsetWidth / 2;
            const y = eye.offsetTop + eye.offsetHeight / 2;
            const rad = Math.atan2(event.pageX - x, event.pageY - y);
            const rot = rad * (180 / Math.PI) * -1 + 180;
            eye.style.transform = 'rotate(' + rot + 'deg)';
            eye.style.msTransform = 'rotate(' + rot + 'deg)';
            eye.style.MozTransform = 'rotate(' + rot + 'deg)';
            eye.style.webkitTransform = 'rotate(' + rot + 'deg)';
        }
    });
</script>
</body>
</html>